<template>
  <div class="container">
    <div class="box box-ver w-p100 h-p100">
      <div class="search box box-ac">
        <div class="icon icon-search"></div>
        <input placeholder="搜索" v-model="searchWord" class="box-f1" type="text">
      </div>
      <div class="fixed-bar">
        <div @click.stop @touchstart="scroll(index)" @touchmove="scroll(index)" v-for="(item, index) in searchList" :key="index" class="text">
          {{index}}
        </div>
      </div>
      <div ref="scroll" class="box box-ver box-f1 of-y-s">
        <div v-for="(item, index) in searchList" :value="item" :key="index" class="list-content">
          <div :id="index" class="tag">
            {{index}}
          </div>
          <div class="list list1">
            <div v-for="(item1, index1) in item" :value="item1" :key="index1" @click="checkItem(item1)"  class="item box box-ver">
              <div class="box box-ac">
                <div class="name">{{item1.userName}}</div>
                <div class="tc-999 code">{{item1.userNumber}}</div>
              </div>
              <div class="dep tc-999 ell">
                {{item1.depName.split('_').pop()}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getPyData, getTop } from '@/assets/js/common'
export default {
  name: 'xinCenPersonSelect',
  data () {
    return {
      dataList: [],
      searchList: [],
      searchWord: '',
      timer: null
    }
  },
  computed: mapState(['userNum', 'userInfo', 'bizAccountBill']),
  mounted () {
    this.getCsApplicant()
  },
  watch: {
    searchWord () {
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.search()
      }, 666)
    }
  },
  methods: {
    checkItem (item) {
      console.log(item)
      let from = this.$route.query.from
      if (from === 'caiBaoStep3') {
        this.$emit('selectPersonCallBack', item)
        this.$router.go(-1)
      } else {
        let entryIndex = this.$route.query.index
        let entrys = this.bizAccountBill.entrys
        let person = entrys[entryIndex].travelPerson
        let hasPerson = false
        person.forEach(item1 => {
          if (item1.userNum === item.userNumber) {
            hasPerson = true
          }
        })
        if (hasPerson) return this.$router.go(-1)

        this.bizAccountBill.entrys[entryIndex].travelPerson.push({
          userNum: item.userNumber,
          userName: item.userName,
          depNumber: item.depNum,
          depName: item.depName.split('_').pop(),
          companyName: this.userInfo.companyName,
          companyNumber: this.userInfo.companyNum
        })

        this.$store.commit('bizAccountBill', {
          entrys: this.bizAccountBill.entrys
        })
        this.$router.go(-1)
      }
    },
    scroll (index) {
      let $target = document.getElementById(index)
      let $scroll = this.$refs.scroll
      let top = getTop($target, $scroll)
      $scroll.scrollTop = top
    },
    search () {
      let searchWord = this.searchWord
      let list = []
      this.dataList.forEach(item => {
        if (item.userName.indexOf(searchWord) > -1 || item.userName.indexOf(searchWord) > -1) {
          list.push(item)
        }
      })
      this.searchList = getPyData(list, 'userName')
    },
    getCsApplicant () {
      if (sessionStorage.getItem('getCsApplicant')) {
        this.dataList = JSON.parse(sessionStorage.getItem('getCsApplicant'))
        this.searchList = getPyData(this.dataList, 'userName')
        return
      }
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'getCsApplicant',
          companyNum: this.userInfo.companyNum
        }
      }).then(res => {
        if (res.code === 200) {
          sessionStorage.setItem('getCsApplicant', JSON.stringify(res.t))
          this.dataList = res.t
          this.searchList = getPyData(res.t, 'userName')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/search';
.list-content{
  background-color:$bgColor;
}
.item{
  font-size:.26rem;
  .code{
    padding-left:.2rem;
  }
  .dep{
    padding-top:.1rem;
  }
}
.fixed-bar{
  width:.5rem;
  position: absolute;
  z-index:8;
  top:55%;
  right:0;
  color:#999;
  // background-color:rgba(0,0,0,.5);
  transform: translateY(-50%);
  .text{
    width:.5rem;
    text-align: center;
  }
}
</style>
